<template>
    <el-dialog title="修改学生" :visible.sync="visible">
        <el-form :model="student">
            <el-form-item label="上传头像" :label-width="formLabelWidth">
                <el-upload
                    class="avatar-uploader"
                    :action="action"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                >
                    <img v-if="student.headImg" :src="prefix + '/images/' + student.headImg" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="student.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth">
                <el-input v-model="student.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-radio-group v-model="student.gender">
                    <el-radio label="男">男</el-radio>
                    <el-radio label="女">女</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary" @click="handleUpdate">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { update } from "../../../services/student";
import {url} from "../../../services";
export default {
    props: ["updateVisible", "student"],
    created(){
        console.log("created:",this.student);
    },
    data() {
        console.log("data:");
        return {
            action: url + '/upload',
            imageUrl: '',
            prefix:url,
            formLabelWidth: "120px",
        };
    },
    computed: {
        visible: {
            get() {
                return this.updateVisible;
            },
            set(visible) {
                this.$emit("setUpdateVisible", visible);
            },
        },
    },
    methods: {
        async handleUpdate() {
            this.visible = false;
            await update(this.student);
            this.$emit("show");
        },
         handleAvatarSuccess(res, file) {
            // this.imageUrl = URL.createObjectURL(file.raw);
            this.student.headImg = res.filename;
            // this.imageUrl = url + '/images/' + res.filename;
        }
    },
};
</script>

<style>
</style>